<!--
 * @Description: 设备侧统计卡片
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-25 16:34:35
 * @LastEditTime: 2021-09-28 17:29:28
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="card">
    <ul>
      <li v-for="(item, index) in dataList" :key="index" :style="dataListStyle">
        <svg class="svg-icon" aria-hidden="true">
          <use :xlink:href="item.icon" />
        </svg>
        <span class="des">{{$t(`monitor.card[${index}]`)}}</span>
        <count-to
          class="number"
          :startVal="item.startVal"
          :endVal="item.endVal"
          :duration="1500"
          separator
        />
      </li>
    </ul>
  </div>
</template>

<script>
import { clientDB, selectKey } from '@/utils/indexDB';
import countTo from 'vue-count-to';
export default {
  name: 'CountCard',
  components: {
    countTo
  },
  data () {
    return {
      dataList: [
        {
          key: 'sum',
          icon: '#icon-caidanguanli',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'popCount',
          icon: '#icon-mixed',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'nonPopCount',
          icon: '#icon-access',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'onlineCount',
          icon: '#icon-online',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'offlineCount',
          icon: '#icon-offline',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'alarms',
          icon: '#icon-tongzhiguanli',
          startVal: 0,
          endVal: 0
        }
      ],
      dataListStyle: {},
    };
  },
  destroyed () {
    this.$ws.unregisterDgQueueListener(this.alarmsAll);
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getCount();
      _this.computedItemWidth();
      _this.$ws.registerDgQueueListener('alarm.notify', _this.alarmsAll);
    });
  },
  methods: {
    alarmsAll (msg) {
      let _this = this;
      let alarms = msg.payload;
      _this.dataList[5] = alarms.severityTotal;
    },
    getCount () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/ne/queryNEStatusCount'
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          // 连接数据库并查询
          clientDB('ione_db', 1, 'ione_table').then(db => {
            selectKey(db, 'ione_table', 1).then(res => {
              let { status, data } = res;
              if (status === '0') {
                let alarms = data.severityTotal;
                for (let i = 0; i < _this.dataList.length; i++) {
                  if (_this.dataList[i].key === 'alarms') {
                    _this.dataList[i].endVal = alarms;
                  } else {
                    _this.dataList[i].endVal = resultBody[_this.dataList[i].key];
                  }
                }
              }
            }, err => {
              _this.$message.error('告警统计数据查询失败！');
            });
          });
        }
      });
    },
    computedItemWidth () {
      let count = this.dataList;
      let width = 100 / count;
      this.dataListStyle = {
        width: `calc(${width}% - 20px)`
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  overflow: hidden;
  background: transparent !important;

  ul {
    width: calc(100% + 15px);
    margin-left: -15px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    background: transparent !important;

    li {
      width: calc(16.666% - 15px);
      height: 125px;
      line-height: 125px;
      text-align: center;
      margin: 0 0 0 15px;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      position: relative;
      border-radius: 3px;
      box-shadow: 0 0px 7px rgba(28, 76, 186, 0.08);
      transition: box-shadow 0.3s;

      &:hover {
        box-shadow: 0 5px 20px rgba(28, 76, 186, 0.12);
      }

      .svg-icon {
        width: 3em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        bottom: 0;
        left: 10%;
      }

      .number {
        color: #515a6e;
        font-size: 26px;
        line-height: 26px;
        margin: 0;
        position: absolute;
        bottom: 50%;
        right: 10%;
      }

      .des {
        color: #999999;
        font-size: 13px;
        line-height: 14px;
        height: 14px;

        position: absolute;
        bottom: 30%;
        right: 10%;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
      }
    }
  }
}

@media only screen and (max-width: $device-notebook) {
  .card {
    padding-top: 0 !important;

    ul {
      li {
        height: 100px;

        .des {
          font-size: 12px;
        }
      }
    }

    .iconfont {
      left: 15px !important;
    }

    .number,
    .des {
      right: 15px !important;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .card {
    ul {
      width: calc(100% + 15px);
      margin-left: -15px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      li {
        width: calc(33.333% - 15px);
        height: 120px;
        line-height: 120px;
        margin-bottom: 15px;
      }
    }
  }
}

@media only screen and (max-width: $device-phone) {
  .card {
    ul {
      width: calc(100% + 15px);
      margin-left: -15px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      li {
        width: 100%;
        height: 100px;
        line-height: 100px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
